<template>
  <!-- 被保人清单 -->
  <div class="pb-[15px] px-[15px]">
    <div class="">
      <van-cell-group inset v-for="(item, index) in user">
        <van-field v-model="item.name" label="姓名" placeholder="请输入姓名" :disabled="!edit" />
        <van-field :disabled="!edit" v-model="item.id_card" label="身份证" placeholder="请输入身份证" />
        <div class="py-[15px] flex items-center w-full px-[15px]">
          <div class="text-[14px] min-w-[100px]" :class="edit ? '' : 'text-[#c8c9cc]'">
            性别
          </div>
          <div class="ml-[10px] flex justify-between items-center w-full" @click="openPop(index)">
            <div class="text-[14px]" :class="{ 'text-[#c8c9cc]': !edit }">
              {{ item.sex ? item.sex : "请选择性别" }}
            </div>
            <div><van-icon name="arrow" /></div>
          </div>
        </div>
        <!-- <van-field
          v-model="item.sex"
          :disabled="!edit"
          label="性别"
          placeholder="请输入身份证"
        /> -->
      </van-cell-group>
    </div>
    <div class="bg-[#FCFCFC] py-[20px] flex justify-center w-full" v-if="edit">
      <div @click="add"
        class="h-[30px] flex items-center justify-center border border-[#EF6800] rounded-[3px] text-[#EF6800] px-[5px]">
        添加被保人
      </div>
    </div>
    <div>
      <van-popup v-model:show="show" position="bottom" :style="{ height: '40%' }">
        <van-picker title="证件类型" :columns="columns" @confirm="onConfirm" @cancel="show = false" />
      </van-popup>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, defineExpose, defineProps, watchEffect } from "vue";
const props = defineProps({
  user: { type: Array },
  edit: { type: Boolean },
});
const user = ref([] as any);
const show = ref(false);
const index = ref(0);
const columns = ref([
  {
    text: "男",
    value: "男",
  },
  {
    text: "女",
    value: "女",
  },
]);
const add = () => {
  user.value.push({
    name: "",
    card_type: "身份证",
    id_card: "",
    sex: "男",
  });
};
const onConfirm = (value: any) => {
  user.value[index.value].sex = value.selectedValues[0];
  show.value = false;
};
const openPop = (i: number) => {
  index.value = i;
  if (!props.edit) return;
  show.value = true;
};
watchEffect(() => {
  if (props.user) {
    user.value = props.user;
  }
});
defineExpose({
  user,
});
</script>
<style scoped lang="scss">
:deep(input.van-field__control::-webkit-input-placeholder) {
  color: #c8c9cc;
}
</style>
